<template>
  <div class="contribute-container">
    <div class="contribute-title"><span>书本管理</span></div>
    <!-- filter-binding-squere -->
    <div class="table-header-container">
      <div class="filter-container">
        <el-input
          v-model="listQuery.id"
          placeholder="ID"
          style="width: 200px"
        />
        <!-- 根据什么排序 -->
        <el-select
          v-model="listQuery.sortBy"
          style="width: 140px"
          class="filter-item"
          @change="handleSortKeyOptionsChange"
        >
          <!-- 排序方式 -->
          <el-option
            v-for="item in sortKeyOptions"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          />
        </el-select>
        <!-- 升序和降序 -->
        <el-select
          v-model="listQuery.isAsc"
          style="width: 140px"
          class="filter-item"
          @change="handleSortOptionsChange"
        >
          <!-- 排序方式 -->
          <el-option
            v-for="item in sortOptions"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          />
        </el-select>
      </div>
      <div class="header-button-set">
        <el-button
          style="margin-left: 10px"
          type="primary"
          :color="colorManager.getColor('__search_button_color')"
          @click="handlePage"
        >
          <el-icon><Search /></el-icon>搜索
        </el-button>
        <el-button
          style="margin-left: 10px"
          :color="colorManager.getColor('__insert_button_color')"
          type="primary"
          @click="handleInsert"
        >
          <el-icon><Edit /></el-icon> 添加
        </el-button>
        <el-button
          type="primary"
          :color="colorManager.getColor('__refresh_button_color')"
          @click="getPage"
        >
          <el-icon><Bottom /></el-icon> 刷新
        </el-button>
      </div>
    </div>

    <!-- 按钮组结束 -->
    <el-table
      class="core-table"
      v-loading="listLoading"
      :data="pageResult.list"
      border
      fit
      highlight-current-row
    >
      <!-- 代码生成区域 -->
      <el-table-column prop="id" label="投稿ID" />
      <el-table-column prop="title" label="Title" />
      <el-table-column prop="briefIntroduction" label="投稿信息简介" />
      <el-table-column prop="createdBy" label="创建人UID" />
      <el-table-column label="审核状态">
        <template #default="scope">
          <!-- 渲染审核状态 -->
          <contribute-judge-status :judgeStatus="scope.row.judgeStatus">
          </contribute-judge-status>
        </template>
      </el-table-column>
      <el-table-column label="封面">
        <template #default="scope">
          <!-- 使用自己的组件 -->
          <elec-img :src="scope.row.picture"></elec-img>
        </template>
      </el-table-column>
      <el-table-column prop="summary" label="大纲介绍" />
      <el-table-column label="稿件文件连接">
        <template #default="scope">
          <elec-file-link :href="scope.row.url"></elec-file-link>
        </template>
      </el-table-column>

      <!-- END 生成结束 -->
      <el-table-column>
        <template #header> 操作 </template>
        <template #default="scope">
          <div class="operate-button-set">
            <el-button
              size="small"
              type="primary"
              color="rgb(21,149,106)"
              @click="handleEdit(scope.$index, scope.row)"
            >
              修改
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >
              删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格定义结束 -->
    <pagination
      :pageNo="listQuery.pageNo"
      :pageSize="listQuery.pageSize"
      :disabled="false"
      @getPage="getPage"
      v-model:pageModel="listQuery"
      v-model:resultModel="pageResult"
    ></pagination>

    <!-- 表单弹出层 -->
    <div>
      <Submit
        v-model:dialogVisible="insertDialogVisible"
        @refreshList="getPage"
        dialogTitle="新增中"
        type="insert"
      ></Submit>
      <Submit
        v-model:dialogVisible="updateDialogVisible"
        @refreshList="getPage"
        dialogTitle="更新中"
        :id="operateId"
        type="update"
      ></Submit>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  listContribute,
  getContribute,
  addContribute,
  updateContribute,
  deleteContribute,
} from "@/api/content/contribute/contribute.js";
import Submit from "./components/submit.vue";
import { DeleteComfirmBox } from "@/utils/MessageUtils.js";
import { checkResult } from "@/utils/Rutil.js";
import { colorManager } from "@/assets/scss/colors-util";
import { useSystemStore } from "@/store/system/systemStore.js";
import contributeJudgeStatus from "./components/judge/contribute-judge-status.vue";
const systemStore = useSystemStore();

const insertDialogVisible = ref(false);
const updateDialogVisible = ref(false);
const listLoading = ref(true);

/**
 * 排序处理器
 */
// 排序规则--根据哪个列
var sortKeyOptions = [{ label: "Use ID", key: "id" }];
const handleSortKeyOptionsChange = (value) => {
  console.log("选中的值：", value);
};
// 排序规则--升序和降序
var sortOptions = [
  { label: "Descending", key: 0 },
  { label: "Ascending", key: 1 },
];
const handleSortOptionsChange = (value) => {
  console.log("选中的值：", value);
};

/**
 * 新增处理器
 */
const handleInsert = async () => {
  insertDialogVisible.value = true;
};

// 当前操作的实体的id
const operateId = ref();

/**
 * 编辑处理器
 */
const handleEdit = (index, row) => {
  console.log(index, "row:", row);
  operateId.value = row.id;
  updateDialogVisible.value = true;
};

/**
 * 删除处理器
 */
const handleDelete = async (index, row) => {
  console.log(index, "row", row);
  operateId.value = row.id;
  // 提供删除确认
  const chooseDelete = await DeleteComfirmBox();
  console.log("chooseDelete", chooseDelete);
  if (chooseDelete === true) {
    const res = await deleteContribute(operateId.value);
    console.log("handleDelete-res:", res);
    if (checkResult(res)) {
      ElMessage({
        type: "success",
        message: "删除成功！",
      });
      getPage();
    } else {
      ElMessage({
        type: "error",
        message: "删除失败！",
      });
    }
  }
};

// 请求数据，用于service发送请求
const listQuery = ref({
  pageNo: 1,
  pageSize: 5,
  isAsc: 1,
  sortBy: "id",
  title: "",
  // judgeStatus: 20102, // 审核通过
});

// 需要优先规定totol，否则组件会发出错误
const pageResult = ref({
  total: 1,
  list: [],
});

/**
 * 获取分页
 */
const getPage = async () => {
  listLoading.value = true;
  try {
    const res = await listContribute(listQuery.value);
    console.log(res.data);
    pageResult.value = res.data;
    console.log("pageResult", pageResult.value);
  } catch {
    // 暂时无处理
  }
  setTimeout(() => {
    listLoading.value = false;
  }, 250);
};

/**
 * 分页请求handle
 */
const handlePage = () => {
  listQuery.pageNo = 1;
  getPage();
};

onMounted(() => {
  console.log(`Contribute.vue is now mounted.`);
  handlePage();
});
</script>

<style lang="scss" scoped>
.contribute-container {
  .contribute-title {
    font-size: 30px;
  }
  .table-header-container {
    margin-top: 5px;
    margin-bottom: 5px;
    display: flex;
    align-items: center; /* 可选，根据需要调整子项的对齐方式 */
    .filter-container {
    }
    .header-button-set {
    }
  }

  .core-table {
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
  }
}
.operate-button-set {
  .el-button {
    margin: 10px;
  }
  display: flex;
  flex-direction: column;
  align-items: center; /* 可选，用于居中对齐 */
}
</style>
